Highcharts লাইব্রেরি ব্যবহার করে আপনি বাহ্যিক ডেটা সোর্স থেকে ডেটা সংগ্রহ করে চার্ট তৈরি করতে পারেন। বাহ্যিক ডেটা সোর্স হতে পারে JSON, CSV, বা API যা আপনাকে ডাইনামিক ও ইন্টারঅ্যাকটিভ ডেটা ভিজুয়ালাইজেশন তৈরি করতে সহায়ক। চলুন, আমরা বিস্তারিতভাবে জানব কিভাবে এই বাহ্যিক ডেটা সোর্সগুলো থেকে ডেটা fetch (আনার) করা যায় এবং Highcharts এ ব্যবহার করা যায়।
১. JSON থেকে Data Fetch করা
JSON (JavaScript Object Notation) একটি জনপ্রিয় ডেটা ফরম্যাট, যা মূলত API বা ব্যাকএন্ড সার্ভার থেকে ডেটা আদান-প্রদান করতে ব্যবহৃত হয়। Highcharts JSON ফরম্যাটে ডেটা AJAX বা fetch API এর মাধ্যমে সংগ্রহ করতে পারে।
উদাহরণ: JSON ফাইল থেকে ডেটা Fetch করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts JSON Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
// JSON ফাইল থেকে ডেটা ফেচ করার উদাহরণ
fetch('data.json') // 'data.json' আপনার JSON ফাইলের পাথ
.then(response => response.json())
.then(data => {
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Sales Data'
},
xAxis: {
categories: data.categories // JSON থেকে ক্যাটেগরি ডেটা
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: data.sales // JSON থেকে সিরিজ ডেটা
}]
});
})
.catch(error => console.log('Error fetching data:', error));
</script>
</body>
</html>
এখানে:
fetch('data.json'): এই লাইনে JSON ফাইলটি ফেচ করা হচ্ছে।data.categoriesএবংdata.sales: JSON থেকে ক্যাটেগরি এবং সিরিজ ডেটা ব্যবহার করা হচ্ছে।
২. CSV থেকে Data Fetch করা
Highcharts CSV ফাইল থেকে ডেটা সংগ্রহ করার জন্য AJAX বা CSV parsing টুলস ব্যবহার করতে পারে। CSV ফাইল থেকে ডেটা ফেচ করার জন্য আপনাকে CSV ফাইলটি পার্স করতে হবে এবং সেই অনুযায়ী Highcharts এ ডেটা প্রক্রিয়া করতে হবে।
উদাহরণ: CSV ফাইল থেকে ডেটা Fetch করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts CSV Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/csv.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
// CSV ফাইল থেকে ডেটা ফেচ করা
fetch('data.csv') // 'data.csv' আপনার CSV ফাইলের পাথ
.then(response => response.text())
.then(data => {
const csvData = Highcharts.parseCSV(data); // CSV ডেটা পার্স
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Sales'
},
xAxis: {
categories: csvData.categories // CSV থেকে ক্যাটেগরি ডেটা
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: csvData.data // CSV থেকে সিরিজ ডেটা
}]
});
})
.catch(error => console.log('Error fetching CSV data:', error));
</script>
</body>
</html>
এখানে:
Highcharts.parseCSV(data): CSV ডেটাকে পার্স করে একটি অবজেক্টে রূপান্তরিত করা হয়েছে।csvData.categoriesএবংcsvData.data: CSV ফাইল থেকে ক্যাটেগরি এবং সিরিজ ডেটা ব্যবহার করা হয়েছে।
৩. API থেকে Data Fetch করা
যেকোনো RESTful API থেকে ডেটা ফেচ করতে আপনি AJAX বা fetch API ব্যবহার করতে পারেন। API থেকে ডেটা ফেচ করার পর, সেই ডেটা Highcharts এর সিরিজ বা এক্স অক্ষের ডেটা হিসেবে সেট করা হয়।
উদাহরণ: API থেকে ডেটা Fetch করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts API Data Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
// API থেকে ডেটা ফেচ করা
fetch('https://api.example.com/sales-data') // API URL যেখানে ডেটা রয়েছে
.then(response => response.json())
.then(data => {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Sales Data from API'
},
xAxis: {
categories: data.categories // API থেকে ক্যাটেগরি ডেটা
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: data.sales // API থেকে সিরিজ ডেটা
}]
});
})
.catch(error => console.log('Error fetching data from API:', error));
</script>
</body>
</html>
এখানে:
- fetch('https://api.example.com/sales-data'): এই লাইনটি API থেকে ডেটা ফেচ করছে।
data.categoriesএবংdata.sales: API থেকে ডেটা নিয়ে Highcharts এর সিরিজ এবং এক্স-অক্ষের ডেটা হিসেবে সেট করা হচ্ছে।
উপসংহার
Highcharts এ external data sources (JSON, CSV, API) থেকে ডেটা ফেচ করা খুবই সহজ এবং ইন্টারঅ্যাকটিভ। আপনি AJAX বা fetch API ব্যবহার করে JSON, CSV, এবং API থেকে ডেটা সংগ্রহ করতে পারেন এবং সেই ডেটাকে Highcharts এর বিভিন্ন চার্টে উপস্থাপন করতে পারেন। এই প্রক্রিয়াটি ডেটা ভিজুয়ালাইজেশনকে আরও ডাইনামিক এবং রিয়েল-টাইম হিসেবে উপস্থাপন করতে সহায়ক।
Read more
